<template>
    <div>
        <el-card class="bottom10">
            <el-row>
                <el-col :span="15">
                    <div>
                        <span class="rigth14"> 关键词:</span>
                        <el-input class="width200" v-model="input" clearable placeholder="请输入节点组名称" @change="inputChange">
                        </el-input>
                        <span class="rigth14 left20">状态:</span>
                        <el-select class="width120" v-model="state" filterable placeholder="请选择">
                            <el-option label="全部" value="-1"></el-option>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="3" :push="6">
                    <el-button class="float-right" type="primary">创建监测任务</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
            <span>
                <el-button type="primary">批量启动</el-button>
                <el-button type="warning">批量暂停</el-button>
                <el-button type="danger">批量删除</el-button>
            </span>
            <e-table :tableConfig="tableConfig" :tableData="tableData" />
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import ETable from 'comps/eTable/index.vue';
export default defineComponent({
    name: 'strategyDeploy',
    components: { ETable },
    setup() {
        const input = ref('');
        const state = ref('');
        const inputChange = (v: String | Number) => {
            console.log(v);
        };
        const tableConfig = reactive(
            //表格配置
            {
                checkbox: true,
                thead: [
                    { lable: '创建时间', prop: 'reateTime' },
                    { lable: '任务名', prop: 'name' },
                    { lable: '监测终端', prop: 'num' },
                    { lable: '频率', prop: 'frequency' },
                    { lable: '状态', prop: 'state', type: 'color' },
                    { lable: '任务类型', prop: 'type' },
                    { lable: '起始时间', prop: 'startTime' },
                    { lable: '结束时间', prop: 'endTime' }
                ],
                operates: [
                    {
                        id: 1,
                        label: '任务管理',
                        type: 'text',
                        method: (index: any, row: any) => {
                            console.log(row);
                            console.log(11);
                        }
                    },
                    {
                        id: 2,
                        label: '数据查看',
                        type: 'text',
                        method: (index: any, row: any) => {
                            console.log(row);
                            console.log(22);
                        }
                    }
                ]
            }
        );
        const tableData = reactive([
            {
                id: '1',
                reateTime: '2020-08-03',
                name: '监测任务一',
                num: '310',
                frequency: '60',
                state: '监测中',
                type: 'PING',
                startTime: '2016-05-02 10:55:01',
                endTime: '2016-05-02 10:55:01'
            },
            {
                id: '2',
                reateTime: '2020-08-03',
                name: '监测任务一',
                num: '310',
                frequency: '60',
                state: '已过期',
                type: 'PING',
                startTime: '2016-05-02 10:55:01',
                endTime: '2016-05-02 10:55:01'
            },
            {
                id: '3',
                reateTime: '2020-08-03',
                name: '监测任务一',
                num: '310',
                frequency: '60',
                state: '监测中',
                type: 'PING',
                startTime: '2016-05-02 10:55:01',
                endTime: '2016-05-02 10:55:01'
            }
        ]);
        const options = reactive([
            {
                value: '1',
                label: '监测中'
            },
            {
                value: '0',
                label: '已暂停'
            },
            {
                value: '3',
                label: '已过期'
            }
        ]);
        return {
            input,
            inputChange,
            tableConfig,
            tableData,
            options,
            state
        };
    }
});
</script>

<style lang="" scoped>
</style>